<#assign base=request.contextPath />
<!DOCTYPE html>
<html>

	<head>
		<base id="base" href="${base}">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>在线充值</title>
		<link rel="stylesheet" href="${base}/resources/plug/app/common.css" />
		<link rel="stylesheet" href="${base}/resources/plug/bootstap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${base}/resources/css/zf/zf-common.css" />
		<link rel="stylesheet" href="${base}/resources/css/zf/zf-confirm.css" />
		<link rel="stylesheet" href="${base}/resources/plug/jquery/toast/css/jquery.toast.css" />
		<link rel="stylesheet" href="${base}/resources/css/ka/ka-recharge.css" />
		<style type="text/css">
			.con-button {
				padding-bottom: 50px;
			}
		</style>
	</head>

	<body>
		<header class="con-header">
			<a href="javascript:history.go(-1)"><i class="con-back"></i></a>
			<h1>在线充值</h1>
			<a href="#" class="header-link">记录</a>
		</header>
		<div class="container">
			<div class="con-tip">
				<i class="tip-img">i</i>
				<span class="tip-tetle">您可以对电子账户进行充值</span>
			</div>
			<div class="con-xz">
				<h3>选择充值金额</h3>
				<div class="row con-col-3padidng">
					<div class="col-xs-4">
						<input type="button" class="button log-btn" value="50元" />
					</div>
					<div class="col-xs-4">
						<input type="button" class="button log-btn btn-opcity" value="100元" />
					</div>
					<div class="col-xs-4">
						<input type="button" class="button log-btn btn-opcity" value="200元" />
					</div>
				</div>
			</div>
			<div class="con-xz con-inpt">
				<h3>其他金额</h3>
				<input type="text" value="" id="otherAmount" placeholder="请输入0-200元充值金额" >
					<input type="hidden" value="50"  id="hiddenAmount"/>
			</div>
			<div class="con-list layer-xyk">
				<div class="list-tiele">
					支付账户
				</div>
				<div class="car-list">
					<div class="row has-feedback">
						<div class="col-xs-2">
							<img src="${base}/resources/img/zf1/icon-xyk.png">
						</div>
						<div class="col-xs-10">校园卡</div>
						<span name="flag" class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
					<div class="row has-feedback">
						<div class="col-xs-2">
							<img src="${base}/resources/img/zf1/icon-dzzh.png">
						</div>
						<div class="col-xs-10">电子账户</div>
						<span name="flag" class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
					<div class="row has-feedback">
						<div class="col-xs-2">
							<img class="car-fang" src="${base}/resources/img/zf1/icon-bdzy.png">
						</div>
						<div class="col-xs-10">绑定的中国银行银行卡</div>
						<span name="flag" class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
					<div class="row has-feedback active">
						<div class="col-xs-2">
							<img class="car-fang" src="${base}/resources/img/zf1/icon-zfb.png">
						</div>
						<div class="col-xs-10">支付宝</div>
						<span name="flag" class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
				</div>
			</div>
			
			<div class="con-button">
				<input id="btn" type="button" type="button" onclick="sureRecharage();"  class="button log-btn con-btn" value="确认充值" />
			</div>
		</div>

	</body>
	<script type="text/javascript" src="${base}/resources/plug/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="${base}/resources/js/common.js"></script>
	<script type="text/javascript" src="${base}/resources/plug/jquery/toast/js/jquery.toast.js"></script>
	<script type="text/javascript" src="${base}/resources/plug/app/alertPopShow.js"></script>
	<script>
		//单选按钮
		$(".con-col-3padidng .button").click(function(e) {
			console.log($(this).val())
			$(this).removeClass("btn-opcity").parent().siblings().children().addClass("btn-opcity");
			var num = $(this).val();
			 num = num.substring(0,num.length - 1);
			$("#hiddenAmount").val(num);
			$("#otherAmount").val('');
		});
		
		//		//单选列表
		//		$(".car-list .row").click(function(e) {
		//			$(this).addClass("active").siblings().removeClass("active");
		//		})
		function verifyOtherAmount(val) {
			if(val != '') {
				var reg = /^\+?[1-9][0-9]*$/; //200. 的时候，默认去掉了.
				if(!reg.test(val)) {
					$("#otherAmount").val('');
					smartObj.tips("金额需为整数");
					return;
				}
				if(val > 200) {
					$("#otherAmount").val('');
					smartObj.tips("请输入0-200元充值金额");
					return;
				}
			}
			return true;

		}
		//确认充值
		function sureRecharage() {
			var amount = $("#otherAmount").val();
			if(amount == '') {
				amount = $("#hiddenAmount").val();
				
			} else {
				if(!verifyOtherAmount(amount)){
					amount = '';
				}
			}
//			alert("输入充值金额为"+amount);
			if(amount != ''){
				window.location.href="${base}/m/doRecharge?amount="+amount;
}

}

//$('#btn').on('click', function() {
//	webToast("恭喜您，修改成功恭喜您，修改成功恭喜您修改成功恭喜您","middle",3000);
//	popTipShow.confirm('弹窗标题','自定义弹窗内容，居左对齐显示，告知需要确认的信息等',['确 定','取 消'],
//			function(e){
//			  //callback 处理按钮事件
//			  var button = $(e.target).attr('class');
//			  if(button == 'ok'){
//				//按下确定按钮执行的操作
//				//todo ....				
//				this.hide();
//				setTimeout(function() {
//					webToast("操作成功","top", 2000);
//				}, 300);
//			  }
//
//			  if(button == 'cancel') {
//				//按下取消按钮执行的操作
//				//todo ....
//				this.hide();
//				setTimeout(function() {
//					webToast("您选择“取消”了","bottom", 2000);
//				}, 300);
//			  }
//			}
//		);
//});
	
	</script>

</html>